<!DOCTYPE html>
<!-- saved from url=(0063)https://www.17sucai.com/preview/836734/2019-05-12/yz/index.html -->
<html lang="zh"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>支持移动端的jQuery滑块式验证码插件 </title>

<!--框架样式-->
<link href="./bootstrap.min.css" rel="stylesheet">

<!--图标样式-->
<link href="./all.min.css" rel="stylesheet">

<!--主要样式-->
<link href="./slidercaptcha.css" rel="stylesheet">

<style>
.slidercaptcha {
	margin: 0 auto;
	width: 314px;
	height: 286px;
	border-radius: 4px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.125);
	margin-top: 40px;
}

.slidercaptcha .card-body {
	padding: 1rem;
}

.slidercaptcha canvas:first-child {
	border-radius: 4px;
	border: 1px solid #e6e8eb;
}

.slidercaptcha.card .card-header {
	background-image: none;
	background-color: rgba(0, 0, 0, 0.03);
}

.refreshIcon {
	top: -54px;
}
</style>
</head>
<body>
    <div class="container-fluid">
        <div class="form-row">
            <div class="col-12">
                <div class="slidercaptcha card">
                    <div class="card-header">
                        <span>请完成安全验证</span>
                    </div>
                    <div class="card-body"><div id="captcha" style="position: relative; width: 280px; margin: 0px auto;"></div>
                </div>
            </div>
        </div>
    </div>

    <script src="./jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="./longbow.slidercaptcha.js"></script>
    <script>
        $('#captcha').sliderCaptcha({
            repeatIcon: 'fa fa-redo',
            setSrc: function () {
                return 'http://images.sdgxgz.com/Pic' + Math.round(Math.random() * 136) + '.jpg';
            },
            onSuccess: function () {

                alert('验证通过!');
            }
        });
    </script>

</body></html>